<template>
  <div class="app-container">
    <div class="bg_fff minh bodybox flexcolumn aligncenter justifycenter">
      <div class="flexcenter mb_100">
        <img src="@/assets/images/profile.jpg" alt="" class="avatar">
      </div>
      <div class="bodycenter">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <div class="mb_50 item">
              <span>用户名：</span>
              <span>{{user.user_login || '-'}}</span>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <div class="mb_50 item">
              <span>手机号：</span>
              <span>{{user.mobile || '-'}}</span>
              <span class="c_primary commhover pl_20 f-13" @click="handleUpdata(1)">修改手机号</span>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <div class="mb_50 item">
              <span>邮箱：</span>
              <span>{{user.user_email || '-'}}</span>
              <span class="c_primary commhover pl_20 f-13" @click="handleUpdata(2)">修改邮箱</span>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <div class="mb_50 item">
              <span>密码：</span>
              <span></span>
              <span class="c_primary commhover pl_20 f-13" @click="handleEditPwd">修改密码</span>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <div class="mb_50 item">
              <span>角色：</span>
              <span v-if="user.role_user">{{user.role_user.role.name || '-'}}</span>
              <span v-else>-</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    
    <el-dialog 
      title="修改密码"
      :visible.sync="pwdopen"
      width="30%"
      :before-close="handleClosePwd">
      <resetPwd @close='handleClosePwd'/>
    </el-dialog>

    <el-dialog 
      :title="title"
      :visible.sync="open"
      width="520px"
      :before-close="handleClose">
      <el-form ref="userform" :model="userfrom" :rules="userrules" label-width="80px">
        <el-form-item v-if="type==1" label="手机号:" prop="phone">
          <el-input v-model="userfrom.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item v-if="type==2" label="邮箱:" prop="email">
          <el-input v-model="userfrom.email" placeholder="请输入邮箱" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitParam">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import userAvatar from "./userAvatar";
// import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getInfo, editPhone,editEmail } from '@/api/login'
// import { getUserProfile } from "@/api/system/user";
import { validPhone } from '@/utils/validate'

export default {
  name: "Profile",
  components: {resetPwd },
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo",
      pwdopen:false,
      open:false,
      type:1,
      title:'',
      userfrom:{
        phone:'',
        email:''
      },
      userrules:{
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validPhone, trigger: "blur" },
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
      }
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser(type) {
      getInfo().then(response => {
        this.user = response.data;
        if(type){
          // 更新
        }
        // this.roleGroup = response.roleGroup;
        // this.postGroup = response.postGroup;
      });
    },

    handleEditPwd(){
      this.pwdopen = true
    },

    handleClosePwd(){
      this.pwdopen = false
    },

    handleUpdata(type){
      this.type = type
      this.title = type == 1?'修改手机号':'修改邮箱'
      this.userfrom.phone = this.user.mobile
      this.userfrom.email = this.user.user_email
      this.open = true
    },

    handleClose(){
      this.$refs.userform.resetFields()
      this.open = false
    },

    submitParam(){
      this.$refs.userform.validate(valid=>{
        if(!valid) return
        if(this.type == 1){
          editPhone({phone:this.userfrom.phone}).then(res=>{
            this.$modal.msgSuccess("修改成功");
            this.getUser(1)
            this.handleClose()
            // this.$store.commit()
          })
        }else{
          editEmail({email:this.userfrom.email}).then(res=>{
            this.$modal.msgSuccess("修改成功");
            this.getUser(1)
            this.handleClose()
            // this.$store.commit()
          })
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.avatar{
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.bodybox{
  padding: 60px;
  padding-top: 0;
}
.bodycenter{
  width: 90%;
}
.item{
  padding-left: 100px;
}

@media ( max-width : 1100px) {
  .item{
    padding-left: 0!important;
  }
}


@media ( max-width : 920px) {
  .bodycenter{
    width: 100%;
  }
}
</style>